<template>
	<s-layout :title="getLangValue('登录')" navbar="login" :showScanCode="false" :bg-style="{color:bgColor}">
		<view class="login-wrap" style="">
			<view class="title">
				<view>{{getLangValue('您好')}}</view>
				<view> {{getLangValue('欢迎登录香港国际人才库系统')}}</view>
			</view>
			<view class="from-wrap">
				<uni-forms ref="resetPasswordRef" v-model="state.model" :rules="state.rules" validate-trigger="bind"
					label-width="0" label-align="left">
					<uni-forms-item name="mobile">
						<view class="form-item">
							<uni-easyinput v-model="state.model.account" prefix-icon="person" :placeholder="getLangValue('请输入账号')"
								:input-border="false">
								<template #left></template>
								<template #right />
							</uni-easyinput>
						</view>
					</uni-forms-item>
					<uni-forms-item name="password">
						<view class="form-item">
							<uni-easyinput v-model="state.model.password" prefix-icon="locked" :placeholder="getLangValue('请输入密码')"
								:input-border="false" type="password">
								<template #left></template>
								<template #right />
							</uni-easyinput>
						</view>
					</uni-forms-item>
				</uni-forms>
				<!--  <view class="ss-flex ss-row-right">
          <su-radio v-model="state.rememberPass" />
          <view class="font-xs ui-TC-4">
            记住密码
          </view>
        </view> -->
				<view class="ss-flex ss-row-right ss-p-y-50">
					<button class="ss-reset-button login-btn" @tap="confirm">{{getLangValue('登录')}}</button>
				</view>
				<!-- <view class="ss-flex ss-row-center ss-p-y-10 font-0 ui-TC-4">
          忘记密码？ 请联系<text class="ui-TC-Main ss-m-l-5">管理员</text>
        </view> -->
			</view>
		</view>
		<view class="version">{{getLangValue('版本号')}}v{{ version }}</view>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep'
	import {
		computed,
		reactive,
		ref
	} from 'vue'
	import {
		version
	} from '@/sheep/config'
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		concat
	} from 'lodash-es'
	import useLang from '@/sheep/hooks/useLang.js'
	const {
		getLangValue
	} = useLang()
	const state = reactive({
		rememberPass: false,
		model: {
			account: '',
			password: ''
		}
	})
	const bgColor = computed(() => {
		return sheep.$store('sys').theme
	})

	const confirm = async () => {
		if (!state.model.account) {
			return sheep.$helper.toast(getLangValue('请输入用户账号'))
		}
		if (!state.model.password) {
			return sheep.$helper.toast(getLangValue('请输入用户密码'))
		}
		const res = await sheep.$api.auth.login(state.model)
		console.log(res);
		if (res.status === 200) {
			sheep.$helper.toast(getLangValue('登录成功'))
			sheep.$store('user').setToken(res.data)
			sheep.$router.go('/pages/index/index')
		}
		console.log('---', res)
	}

	onLoad(async (options) => {
		if (process.env.NODE_ENV === 'development') {
			state.model.account = 'vip001'
			state.model.password = 'vip123456'
		}
	})
</script>

<style scoped lang="scss">
	.login-btn {
		width: 630rpx;
		height: 90rpx;
		background: var(--ui-BG-Main);
		color: #fff;
		font-size: 34rpx;
		border-radius: 45rpx
	}

	.version {
		position: fixed;
		bottom: 50rpx;
		text-align: center;
		width: 100%;
		color: #fff;
		font-size: 24rpx;
	}

	.login-wrap {
		padding-top: 220rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		// background: url('../../static/login-bg.png') no-repeat 100% 100%;
	}

	.title {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.from-wrap {
		margin-top: 70rpx;
		background: #FDFFFF;
		border-radius: 30rpx;
		padding: 100rpx 35rpx;
	}

	.form-item {
		border-bottom: 1rpx #EFEFEF solid;
	}
</style>